<template>
    <div id="bg">
        <fieldset id="field">
            <ul style="list-style: none;">
                <li>
                    <div class="input-group" style="width: 230px;">
                        <label class="input-group-addon" for="loginName"><i class="glyphicon glyphicon-user"></i></label>
                        <input id="loginName" class="form-control" placeholder="请输入电话号码" type="text" v-model="login.phone">
                    </div>
                </li>
                <li style="margin-top: 20px;">
                    <div class="input-group" style="width: 230px;">
                        <label  class="input-group-addon" for="loginPassword"><i class="glyphicon glyphicon-lock"></i></label>
                        <input id="loginPassword" class="form-control" placeholder="请输入密码" type="password" v-model="login.password">
                    </div>
                </li>
                <li style="margin-top: 20px;">
                    <button id="login" @click="getUser()">立即登录</button>
                </li>
                <li style="margin-top: 8px;">
                    <label style="font-size: 5px;">没有账号，<a href="http://localhost:8080/register">立即注册</a></label>
                    <label style="font-size: 5px;padding-left: 60px;" ><a @click="getRegister()">忘记密码</a></label>
                </li>
            </ul>
        </fieldset>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name:'login',
    data:function(){
        return{
            login:{
                phone:'',
                password:''
            },
        }
    },
    methods:{
        getUser(){
            let user = this.$store.state.user
            console.log('我执行了getUser()方法')
            console.log(this.login.phone)
            console.log(this.login.password)

            if (!/^[0-9]*$/.test(this.login.phone) || !/^\w+$/.test(this.login.password)) {
                alert("格式错误，请重新输入");
                this.$router.go(0)
            } else {
                if(this.login.phone != '' && this.login.password != ''){
                    console.log('我进行了判断')
                    this.$axios.post(
                    '/login',
                    this.$qs.stringify({
                        phone:this.login.phone,
                        password: this.login.password,
                    })
                    ).then((res) => {
                        console.log('/login' + ' 获取成功...1')
                        console.log(res.data)
                        if (res.data.result){
                            this.$store.commit('successLogin', res.data.user)
                            this.$router.push({name:'home'})
                        }else{
                            alert("账号或密码错误！请重新输入")
                            this.$router.go(0)
                            console.log('我重新输入了')
                        }

                    }).catch(function (error) {
                        console.log('/login' + '获取失败...')
                        console.log(error)
                    })
                }else{
                    alert("输入不能为空!")
                    this.$router.go(0)
                }
            }
        },
    }
}
</script>

<style scoped>
    #bg{
      background: url(../../static/undraw_exploring_re_grb8.svg);
      background-repeat: no-repeat;
      background-size: 100%;
      height: 720px;
      padding-top: 100px;
    }
    #field{width: 330px; height: 260px;margin: auto;background-color: rgb(249, 252, 250);padding-top: 50px;border-radius: 8px;}
    #login{width: 200px;height: 33px;background-color: rgba(213, 243, 199, 0.938);margin-left: 15px;border-radius: 5px;}
</style>
